<template>
  <div class="container">
    <div class="member pt-22 pb-10">
      <p class="mb-8">
        <span class="fz-16 fw-600 mr-6">{{ info.name }}</span>
        <span style="color: #666">
          {{ $day(info.start_time * 1000).format('YYYY-MM-DD') }}&nbsp;{{
            $day(info.start_time * 1000).format('HH:mm')
          }}-{{ $day(info.end_time * 1000).format('HH:mm') }}
        </span>
      </p>
      <div class="tag-box mb-17">
        <el-tag
          size="small"
          class="mr-6 tag"
          :color="checkedColor(item.text)"
          v-for="(item, index) in tabList"
          :key="index"
          >{{ item.text }}</el-tag
        >
        <slot name="operation" :data="info">
          <img
            src="@/assets/img/icon/home/yikai.png"
            class="status-img"
            alt=""
            v-if="info.status == 4"
          />
          <!-- <img
          src="@/assets/img/icon/home/weikai.png"
          class="status-img"
          alt=""
        /> -->
          <el-button
            type="primary"
            class="e-button"
            @click="lookDetail"
            v-if="![5, 4].includes(info.status)"
            >查看详情</el-button
          >
          <div class="flex e-button" v-if="info.status == 5">
            <el-popconfirm
              title="您确定拒绝该用户的预约?"
              @confirm="isconfirm(info.ua_id, 2)"
            >
              <template #reference>
                <el-button round>取消</el-button>
              </template>
            </el-popconfirm>
            <el-button
              round
              type="primary"
              class="e-button"
              @click="isconfirm(info.ua_id, 1)"
              >确定</el-button
            >
          </div>
        </slot>
      </div>
      <p class="content">{{ info.content }}</p>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue'
import { useStore } from 'vuex'
export default defineComponent({
  name: 'currentItem',
  props: {
    info: {
      type: Object,
      default: () => ({ num: 12 })
    }
  },
  emits: ['showChat', 'refuse'],
  setup(props, { emit }) {
    const store = useStore()
    /**
     * 客户标签
     */
    const tabList = computed(() => {
      let newArr = []
      if (props.info.tab) {
        for (let item of props.info.tab) {
          for (let v of item) {
            newArr.push(v)
          }
        }
      }

      return newArr
    })
    /**
     * 根据标签显示不同颜色
     */
    const checkedColor = computed(() => {
      return function (val: string) {
        let color = ''
        switch (val) {
          case '新客户':
            color = '#5198fe'
            break
          case '老客户':
            color = '#5198fe'
            break
          case '已开处方药':
            color = '#bdd85e'
            break
          case '高度异常':
            color = '#f8ca20'
            break
          default:
            color = '#F8CA20'
            break
        }
        return color
      }
    })
    /**
     * 弹出对话框
     */
    const lookDetail = () => {
      let params = {
        avatar: props.info.avatar,
        patient_id: props.info.id,
        username: props.info.name,
        ua_id: props.info.ua_id
      }
      emit('showChat')
      store.commit('user/setClientInfo', params)
      store.dispatch('message/getMsg', {
        userid: props.info.id,
        doctor_no: store.state.user.userInfo.doctor_no
      })
    }
    /**
     * 拒绝用于预约
     */
    const isconfirm = (id: number, status: number) => {
      let postData = {
        id,
        status
      }
      emit('refuse', postData)
    }
    return {
      tabList,
      checkedColor,
      lookDetail,
      isconfirm
    }
  }
})
</script>

<style lang="less" scoped>
.container {
  background: #fff;
}
.member {
  position: relative;
  border-bottom: 1px solid #f0f0f0;
  .tag-box {
    .e-button {
      float: right;
    }
    :deep(.el-button) {
      min-height: 28px;
      padding: 5px 20px;
    }
  }
  .status-img {
    position: absolute;
    right: 0;
    top: 20px;
    width: 88px;
    height: 66px;
  }
  .content {
    line-height: 25px;
    color: #1f1f1f;
    font-size: 16px;
  }
}
.tag {
  color: #fff;
}
</style>
